﻿.sidebar {
    --bsb-dark: var(--b-sidebar-background, #343a40);
    --bsb-dark-dark: var(--b-sidebar-background, #343a40);
    --bsb-dark-light: var(--b-sidebar-color, #ced4da);
    min-width: 220px;
    max-width: 220px;
    min-height: 100vh;
    transition: margin .4s ease-in-out;
    z-index: 2;
}

.sidebar, .sidebar-content {
    top: 0;
    position: sticky;
    background: var(--bsb-dark);
}

.sidebar-sticky .sidebar-nav {
    padding-bottom: 0;
}

.sidebar-sticky .sidebar-content {
    overflow-y: scroll;
    height: 100vh;
    position: fixed;
    top: 0;
    z-index: 2;
    width: 220px;
}

.sidebar-nav {
    padding-bottom: 3.5rem;
    padding-left: 0;
    list-style: none;
}

.sidebar-link .feather, .sidebar-link svg {
    margin-right: .75rem;
    color: #fff;
}

.sidebar-link, a.sidebar-link {
    display: block;
    padding: .75rem 1.25rem;
    color: var(--bsb-dark-light) !important;
    background: var(--bsb-dark);
    transition: background .1s ease-in-out,color .1s ease-in-out;
    position: relative;
    text-decoration: none;
}

    .sidebar-link:focus {
        outline: 0;
    }

    .sidebar-link.active {
        color: #e9ecef !important;
    }

    .sidebar-item.active .sidebar-link:hover,
    .sidebar-link:hover {
        color: var(--bsb-dark-dark) !important;
        background: var(--bsb-dark-light) !important;
        cursor: pointer;
    }

.sidebar-subitem {
    padding-left: 0;
    list-style: none;
}

    .sidebar-subitem .sidebar-link {
        padding-left: 2.5rem;
        color: #adb5bd;
        background: var(--bsb-dark-dark);
    }

        .sidebar-subitem .sidebar-item.active .sidebar-link,
        .sidebar-subitem .sidebar-link:hover {
            color: var(--bsb-dark-dark);
            background: var(--bsb-dark-light);
        }

.sidebar [data-toggle=sidebar-collapse] {
    position: relative;
}

    .sidebar [data-toggle=sidebar-collapse]:before {
        content: " ";
        border: solid;
        border-width: 0 2px 2px 0;
        display: inline-block;
        padding: 2px;
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
        position: absolute;
        top: 1.2rem;
        right: 1.25rem;
        transition: all .2s ease-out;
    }

    .sidebar [aria-expanded=true]:before,
    .sidebar [data-toggle=sidebar-collapse]:not(.collapsed):before {
        -webkit-transform: rotate(-135deg);
        transform: rotate(-135deg);
        top: 1.4rem;
    }

.sidebar-brand a {
    font-weight: 500;
    font-size: 1.15rem;
    padding: 1.15rem 1.25rem;
    color: #f8f9fa;
    display: block;
}

.sidebar-brand:hover {
    text-decoration: none;
    color: #f8f9fa;
}

.sidebar-brand:focus {
    outline: 0;
}

.sidebar-brand .feather, .sidebar-brand svg {
    color: #0cc2aa;
    height: 24px;
    width: 24px;
    margin-left: -.15rem;
    margin-right: .375rem;
}

.sidebar-toggle {
    cursor: pointer;
}

.sidebar:not(.sidebar-collapsed).show {
    margin-left: -220px;
}

.sidebar-collapsed.show {
    margin-left: -220px;
}

html[data-useragent*="MSIE 10.0"] .show.sidebar-collapsed {
    margin-left: 0 !important;
}

.sidebar-label {
    background: transparent;
    color: #adb5bd;
    padding: .375rem 1.25rem;
    font-size: .75rem;
}

.sidebar-bottom {
    padding: 1rem;
    width: inherit;
    font-size: .8rem;
    bottom: 0;
    position: fixed;
    background: var(--bsb-dark-dark);
    min-width: 220px;
    max-width: 220px;
    color: #e9ecef;
    z-index: 3;
}

.sidebar-badge {
    position: absolute;
    right: 15px;
    top: 14px;
}

.sidebar-collapse:not(.show) {
    display: none;
}

.sidebar-subitem:not(.show) {
    display: none;
}

@media (min-width:1px) and (max-width:767.98px) {
    .sidebar:not(.sidebar-collapsed) {
        margin-left: -220px;
    }

        .sidebar:not(.sidebar-collapsed).show {
            margin-left: 0;
        }
}
